<template>
  <div class="loginbody">
    <h1>用户列表数据1</h1>
    <div class="headerd">
      <div>
        <el-button type="primary" @click="addlist">新增</el-button>
      </div>
      <div class="headernei2">
        <el-input placeholder="请输入内容" v-model="inputId" clearable>
        </el-input>
        <el-button type="primary" @click="chaxundeptsgetById">查询</el-button>
      </div>
    </div>

    <!--定义一个表格,包括6列,分别是: ID, 用户名, 密码, 姓名, 年龄, 更新时间-->
    <el-table
      ref="singleTable"
      :data="userList"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column property="id" label="ID" width="120"></el-table-column>
      <!-- <el-table-column
        property="username"
        label="用户名"
        width="120"
      ></el-table-column> -->
      <!-- <el-table-column property="password" label="密码"></el-table-column> -->
      <el-table-column property="name" label="部门名称"></el-table-column>
      <el-table-column property="createTime" label="创建时间"></el-table-column>
      <el-table-column property="updateTime" label="更新时间"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="handle(scope.$index, scope.row)"
            type="text"
            size="small"
            icon="el-icon-s-tools"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="deletethis(scope.$index, scope.row)"
            type="text"
            size="small"
            icon="el-icon-s-tools"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>这是一段信息</span>
        <el-form :model="form">
          <!-- <el-row> -->
          <!-- <el-col :span="12"> -->
          <el-form-item label="部门名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="12">
              <el-form-item label="密码">
                <el-input v-model="form.password" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄">
                <el-input v-model="form.age" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import {
  deptslist,
  deptsadd,
  deptsupdate,
  deptsdelete,
  deptsgetById,
} from "@/api/configUserCopy";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "login",
  data() {
    return {
      userList: [],
      currentRow: {},
      dialogVisible: false,
      form: {},
      inputId: "",
    };
  },
  mounted() {
    this.testasdas();
  },
  methods: {
    testasdas() {
      this.userList = [];
      deptslist().then((res) => {
        this.userList = res.data;
        console.log(this.userList);
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    addlist() {
      this.dialogVisible = true;
    },
    newone(val) {
      let pamas = { name: val };
      deptsadd(pamas)
        .then((res) => {
          console.log(res, "新增");
          this.testasdas();
        })
        .catch((res) => {
          this.$utils.showMessageError(res ? res : "请输入内容");
        });
    },
    handle(val, vab) {
      console.log(val, vab);
      this.dialogVisible = true;
      this.form = vab;
    },
    modifypages(val) {
      let pamas = { name: val.name, id: val.id };
      deptsupdate(pamas).then((res) => {
        console.log(res, "修改");
        this.testasdas();
      });
    },
    deletethis(val, vab) {
      console.log(val, vab);

      deptsdelete(vab.id).then((res) => {
        console.log(res, "删除");
        this.testasdas();
      });
    },
    cancel() {
      this.form = {};
      this.dialogVisible = false;
    },
    handleClose() {
      this.form = {};
      this.dialogVisible = false;
    },
    submit() {
      console.log(this.form, "this.form");
      if (this.form.id) {
        this.modifypages(this.form);
      } else {
        this.newone(this.form.name);
      }
      this.dialogVisible = false;
      this.form = {};
    },
    deptsgetById(id) {
      this.userList = [];
      deptsgetById(id).then((res) => {
        console.log(res, "查id");
        if (res.data) {
          this.userList.push(res.data);
        }
      });
    },
    chaxundeptsgetById() {
      if (this.inputId) {
        this.deptsgetById(this.inputId);
      } else {
        this.testasdas();
      }
    },
  },
};
</script>
  
  <style scoped>
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
}
tr {
  height: 40px;
}
th,
td {
  border: 1px solid #ccc;
}
thead {
  background-color: #e8e8e8;
}
h1 {
  text-align: center;
  font-family: 楷体;
}
</style>
  
<style lang="less" scoped>
.headerd {
  display: flex;
  justify-content: space-between;
  .headernei2 {
    display: flex;
  }
}
</style>